<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            position: relative;
            background-color: aliceblue;
        }

        .itempanel {
            position: absolute;
            height: 1300px;
            width: 1300px;
            border-radius: 50%;
            top: 40%;
            border: 3px solid #fcc;
            transition: 0.5s ease-in;
        }

        .itembox {
            position: absolute;
            display: flex;
            align-items: flex-start;
            justify-self: center;
            height: 120%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg));
        }

        .itembox a {
            position: relative;
            height: 15em;
            width: 15em;
            border: 3px solid #ccc;
            border-radius: 50%;
            line-height: 12em;
            text-align: center;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="itempanel">
            <div class="itembox" style="--i:1">
                <a href="#">1</a>
            </div>
            <div class="itembox" style="--i:2">
                <a href="#">2</a>
            </div>
            <div class="itembox" style="--i:3">
                <a href="#">3</a>
            </div>
            <div class="itembox" style="--i:4">
                <a href="#">4</a>
            </div>
            <div class="itembox" style="--i:5">
                <a href="#">5</a>
            </div>
            <div class="itembox" style="--i:6">
                <a href="#">6</a>
            </div>
        </div>
        <div class="next">next</div>
        <div class="pre">pre</div>
    </div>
    <script>
        var increament = 0;
        var degRotate = 0;
        var currentNav = 0;
        const next = document.querySelector('.next');
        const pre = document.querySelector('.pre');
        const itempanel = document.querySelector('.itempanel')
        next.addEventListener('click', () => {
            increament++;
            degRotate += 60;
            itempanel.style.rotate = degRotate + 'deg';
        })
        const itemnav = document.querySelectorAll('.itembox')
        itemnav.forEach((nav, index) => {
            nav.addEventListener('click', () => {
                // debugger;
                let chazhi = currentNav - (index + 1);
                let cdeg = chazhi * 60;
                itempanel.style.rotate = cdeg + 'deg';
                // for (let i = 0; i < itemnav.length; i++) {
                //     itemnav[i].style.rotate = chazhi + 'deg'
                // }
            })
        })
    </script>
</body>

</html>